/**
 * Created by lixinkun on 2017/5/23.
 */
import React, {Component} from 'react';
import {View, Text, ScrollView} from 'react-native';
import {connect} from 'react-redux';
import NavigationBar from '../../components/NavigationBar';
import ListViewForCollection from '../../components/ListViewForCollection';
import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';

class CollectionFragment extends Component {
    constructor(props){
        super(props);
    }

    render(){
        return(
            <View style={{flex: 1, backgroundColor: this.props.pageBackgroundColor}}>
                <NavigationBar title="收藏"/>
                {this.props.dataSource.length > 0 ?
                    <ScrollView>
                        <ListViewForCollection
                            dataSource={this.props.dataSource}
                            navigator={this.props.navigator}/>
                    </ScrollView>
                :
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{color: this.props.subTitleColor}}>还没有收藏数据，赶紧去收藏吧</Text>
                    </View>
                }
            </View>
        )
    }

    componentDidMount() {
        RCTDeviceEventEmitter.addListener('refresh', this._refreshWholeDOM.bind(this));
    }

    componentWillUnMount() {
        RCTDeviceEventEmitter.removeListener('refresh', this._refreshWholeDOM.bind(this));
    }

    _refreshWholeDOM() {
        this.forceUpdate();
    }
}



const mapStateToProps = (state) => {
    return {
        dataSource: state.favorDataState.dataSource,
        pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
        subtitle: state.settingState.colorScheme.subTitleColor,
    };
}

export default connect(mapStateToProps)(CollectionFragment);

